
<template>
  <div class="nav">
      <img class="logo" src="../assets/logo.png" alt="">
      <div class="title">编程导航</div>
      <div class="desc">简历</div>
      <div class="desc">博客</div>
      <div class="desc">星球</div>
      <input class="pub" type="button" value="发布文章">
  </div>
</template>

<script>

export default {
  name: 'Nav',
}
</script>

<style scoped>

.nav {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.nav .logo {
  width: 30px;
  height: 30px;
  margin: 0 10px;
}

.nav .title {
  width: 70px;
  font-weight: 600;
  margin-right: 30px;
}

.nav .desc {
  width: 40px;
  text-align: center;
}

.nav .pub {
  width: 80px;
  height: 30px;
  margin-left: 30px;
  color: #f0f0f0;
  background-color: rgb(25, 144, 255);
  border: none;
  border-radius: 5px;
}
</style>
